<nz-spin [nzSpinning]="isSpinning">
  <form nz-form [formGroup]="validateForm">
    <div nz-row *ngIf="partyType==4">
      <!-- 单位全称-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="partyId" nz-form-item-required>单位全称</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('partyId')">
          <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" formControlName="partyId" [nzSize]="'large'"
                     [nzDisabled]="true" (nzOpenChange)="partyListChange()" [(ngModel)]="personalBean.partyId" name="partyId">
            <nz-option *ngFor="let item of partyList" [nzLabel]="item.partyName" [nzValue]="item.partyId"></nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="getFormControl('partyId').dirty&&getFormControl('partyId').hasError('required')">单位全称不能为空!</div>
        </div>
      </div>

      <!-- 登录名-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label nz-form-item-required>登录名</label>
        </div>
        <div nz-col [nzSpan]="8" nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('userCode')">
          <nz-input formControlName="userCode" [nzType]="'text'" [nzPlaceHolder]="'请设置用户名(数字、字母或数字结合)'" [nzSize]="'large'"
                    [(ngModel)]="personalBean.userCode">
          </nz-input>
          <div nz-form-explain *ngIf="getFormControl('userCode').dirty&&getFormControl('userCode').hasError('required')">用户名不能为空!</div>
          <div nz-form-explain *ngIf="getFormControl('userCode').dirty&&getFormControl('userCode').pending">此用户名无效</div>
        </div>
      </div>

      <!-- 用户姓名-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="userName" nz-form-item-required>用户姓名</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('userName')">
          <nz-input [nzSize]="'large'" formControlName="userName" [nzPlaceHolder]="'请输入用户真实姓名，确认后无法修改'" [nzType]="'userName'"
                    [nzId]="'userName'" [(ngModel)]="personalBean.userName"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('userName').dirty&&getFormControl('userName').hasError('required')">用户姓名不能为空!</div>
        </div>
      </div>

      <!-- 手机号码-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="phone" nz-form-item-required>手机号码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
          <nz-input name="phone" [nzId]="'phone'" formControlName="phone" [nzSize]="'large'" [(ngModel)]="personalBean.phone"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('phone').dirty&&getFormControl('phone').hasError('required')">手机号不能为空!</div>
        </div>
      </div>

      <!-- 用户类型-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="roleId" nz-form-item-required>用户类型</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('roleId')">
          <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" formControlName="roleId" [nzSize]="'large'" (nzOpenChange)="ChangType(this)"
                     [(ngModel)]="personalBean.roleId" name="roleId">
            <nz-option *ngFor="let item of _useroptions" [nzLabel]="item.roleName" [nzValue]="item.id"></nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="getFormControl('roleId').dirty&&getFormControl('roleId').hasError('required')">用户类型不能为空!</div>
        </div>
      </div>

      <!-- 密码-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="password" nz-form-item-required>密码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('password')">
          <nz-input [nzSize]="'large'" formControlName="password" [nzPlaceHolder]="'请设置密码'" [nzType]="'password'"
                    [nzId]="'password'" (ngModelChange)="updateConfirmValidator()" [(ngModel)]="personalBean.password"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">密码不能为空!</div>
        </div>
      </div>

      <!-- 确认密码-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="checkPassword" nz-form-item-required>确认密码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('checkPassword')">
          <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzPlaceHolder]="'请再次确认密码'" [nzType]="'password'"
                    [nzId]="'checkPassword'"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">请再次输入密码!</div>
          <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">两次密码输入不一致!</div>
        </div>
      </div>

      <!-- 身份证号码-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="cardNumber" nz-form-item-required>身份证号码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('cardNumber')">
          <nz-input [nzSize]="'large'" formControlName="cardNumber" [nzPlaceHolder]="'请输入身份证号码'" [nzType]="'cardNumber'"
                    [nzId]="'cardNumber'" [(ngModel)]="personalBean.cardNumber"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('cardNumber').dirty&&getFormControl('cardNumber').hasError('required')">身份证号码不能为空!</div>
        </div>
      </div>

      <!-- 工号-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="workNumber" nz-form-item-required>工号</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('workNumber')">
          <nz-input [nzSize]="'large'" formControlName="workNumber" [nzPlaceHolder]="'请输入工号'" [nzType]="'workNumber'"
                    [nzId]="'workNumber'" [(ngModel)]="personalBean.workNumber"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('workNumber').dirty&&getFormControl('workNumber').hasError('required')">工号不能为空!</div>
        </div>
      </div>

      <!-- 用户持证类型-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="cardType">用户持证类型</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('cardType')">
          <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" formControlName="cardType" [nzSize]="'large'"
                     [nzMode]="'multiple'" [(ngModel)]="cardType" name="cardType">
            <nz-option *ngFor="let v of _cardTypeoption" [nzLabel]="v.label" [nzValue]="v.value"></nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="getFormControl('cardType').dirty&&getFormControl('cardType').hasError('required')">用户持证类型不能为空!</div>
        </div>
      </div>

      <!-- 证件号-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="cardTypeNumber">证件号</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('cardTypeNumber')">
          <nz-input [nzSize]="'large'" formControlName="cardTypeNumber" [nzPlaceHolder]="'多个证件号的，请以逗号隔开'" [nzType]="'cardTypeNumber'"
                    [nzId]="'cardTypeNumber'" [(ngModel)]="personalBean.cardTypeNumber"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('cardTypeNumber').dirty&&getFormControl('cardTypeNumber').hasError('required')">证件号不能为空!</div>
        </div>
      </div>

      <!-- 办公电话-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label>办公电话</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback  [nzValidateStatus]="getFormControl('mobile')">
          <nz-input [nzSize]="'large'" formControlName="mobile" [nzPlaceHolder]="'请输入办公电话'" [nzType]="'mobile'" [nzId]="'mobile'" [(ngModel)]="personalBean.mobile"></nz-input>
        </div>
      </div>

      <!-- 资质证书-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label>资质证书</label>
        </div>
        <div nz-form-control nz-col [nzSm]="8" [nzXs]="24" nzHasFeedback>
          <nz-upload nzAction="{{config.IP+config.API.upload}}" nzListType="picture-card" [(nzFileList)]="fileList"
                     [nzPreview]="handlePreview" [nzRemove]="nzRemoveFile" (nzChange)="handleChange($event)">
            <i class="anticon anticon-plus"></i>
            <div class="ant-upload-text">上传</div>
          </nz-upload>
          <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
            <ng-template #modalContent>
              <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
            </ng-template>
          </nz-modal>
        </div>
      </div>

      <!--社保证明-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label>社保证明</label>
        </div>
        <div nz-form-control nz-col [nzSm]="8" [nzXs]="24" nzHasFeedback>
          <nz-upload nzAction="{{config.IP+config.API.upload}}" [(nzFileList)]="socialList" (nzChange)="socialHandleChange($event)" [nzShowButton]="true" [nzRemove]="nzSocialRemoveFile" [nzPreview]="handlePreview">
            <button nz-button>
              <i class="anticon anticon-upload"></i><span>上传</span>
            </button>
          </nz-upload>
        </div>
      </div>

      <!-- 初次取证时间-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="firstgtshow">初次取证时间</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('firstgtshow')">
          <nz-datepicker style="min-width:200px" [nzDisabled]="false" formControlName="firstgtshow" [nzSize]="'large'"
                         [nzFormat]="'YYYY-MM-DD'" [(ngModel)]="personalBean.firstgtshow" name="firstgt" [nzPlaceHolder]="'初次取证时间'"></nz-datepicker>
        </div>
      </div>

      <div nz-form-item nz-row style="margin-bottom:8px;">
        <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="10">
          <button nz-button [nzSize]="'large'" [nzType]="'primary'" (click)="submitForm($event)">添加</button>
        </div>
      </div>
    </div>


    <!-- 非监管人员所属列表-->
    <div nz-row *ngIf="partyType !=4 ">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="partyId" nz-form-item-required>单位全称</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('partyId')">
          <!--<nz-input [nzSize]="'large'" formControlName="partyId" [nzPlaceHolder]="'请输入单位全称'" [nzType]="'partyId'" [nzId]="'partyId'"-->
          <!--[(ngModel)]="personalBean.partyId"></nz-input>-->
          <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" formControlName="partyId" [nzSize]="'large'"
                     [nzDisabled]="true" (nzOpenChange)="partyListChange()" [(ngModel)]="personalBean.partyId" name="partyId">
            <nz-option *ngFor="let item of partyList" [nzLabel]="item.partyName" [nzValue]="item.partyId"></nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="getFormControl('partyId').dirty&&getFormControl('partyId').hasError('required')">单位全称不能为空!</div>
        </div>
      </div>

      <!-- 用户姓名-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="userName" nz-form-item-required>用户姓名</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('userName')">
          <nz-input [nzSize]="'large'" formControlName="userName" [nzPlaceHolder]="'请输入用户真实姓名，确认后无法修改'" [nzType]="'userName'"
                    [nzId]="'userName'" [(ngModel)]="personalBean.userName"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('userName').dirty&&getFormControl('userName').hasError('required')">用户姓名不能为空!</div>
        </div>
      </div>

      <!-- 身份证号码-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label for="cardNumber" nz-form-item-required>身份证号码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('cardNumber')">
          <nz-input [nzSize]="'large'" formControlName="cardNumber" [nzPlaceHolder]="'请输入身份证号码'" [nzType]="'cardNumber'"
                    [nzId]="'cardNumber'" [(ngModel)]="personalBean.cardNumber"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('cardNumber').dirty&&getFormControl('cardNumber').hasError('required')">身份证号码不能为空!</div>
        </div>
      </div>

      <!--社保证明-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="9">
          <label>社保证明</label>
        </div>
        <div nz-form-control nz-col [nzSm]="8" [nzXs]="24" nzHasFeedback>
          <nz-upload nzAction="{{config.IP+config.API.upload}}" [(nzFileList)]="socialList" (nzChange)="socialHandleChange($event)" [nzShowButton]="true" [nzRemove]="nzSocialRemoveFile" [nzPreview]="handlePreview">
            <button nz-button>
              <i class="anticon anticon-upload"></i><span>上传</span>
            </button>
          </nz-upload>
        </div>
      </div>

      <div nz-form-item nz-row style="margin-bottom:8px;">
        <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="10">
          <button nz-button [nzSize]="'large'" [nzType]="'primary'" (click)="submitForm($event)">添加</button>
        </div>
      </div>
    </div>
  </form>
</nz-spin>
